/**
 原生css定义变量：
 语法：变量名以--开头+名字（可以-分割):css有效值
 使用：var(css变量名)
 1. 全局方式
 2. 局部方式
*/
// @import '@/styles/hairline.scss';
@import '@scss/hairline.scss';


:root {
  /* 全局变量 */
  --geek-color: red;
  --geek-border: 6px solid orange;
}

.box {
  /* 局部变量:只能在.box下使用 */
  --box-font-size: 30px;
  margin: 20px;
  font-size: var(--box-font-size);
  color: var(--geek-color);
  border: var(--geek-border);
}

.bd {
  border-bottom:1px solid red;
}

.btop {
  position: relative;
  @include hairline(top, green);
}
